{% extends 'templates/base_hader.html' %}
{% block content %}

    <div>
        <div class="container-fluid">
            <div class="row ">
                <div class="col-md-2" style="background:#dff0d8 ">
                    <ul class="nav nav-sidebar ">
                        <li class="active"><a href="">订单相关 <span class="sr-only">(current)</span></a>
                        </li>
                        <li><a href="{% url 'order_list' %}">工单列表</a></li>
                        <li><a href="{% url 'plan_list' %}">计划列表</a></li>
                        <li><a href="#">日报列表</a></li>
                        <li><a href="#">制造表</a></li>
                    </ul>
                </div>
                <div class="col-md-10">
                    <h2>制造二课产线数量面板</h2>
                    <h3>日期：{{ yesterday1 }}</h3>
                    <table class="table-hover table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>序号</th>
                            <th>班次</th>
                            <th>线别</th>
                            <th>计划数量</th>
                            <th>完成数量</th>
                            <th>完成比例</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>1</td>
                            <td>白班</td>
                            <td>F线</td>
                            <td>{{ f_line_data }}</td>
                            <td>{{ sf_line_data }}</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="{{ f_schedule }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100" style="width: {{ f_schedule }}%; color: #0f0f0f">
                                        {{ f_schedule }}%
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>2</td>
                            <td>白班</td>
                            <td>C线</td>
                            <td>{{ c_line_data }}</td>
                            <td>{{ sc_line_data }}</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="{{ c_schedule }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100" style="width: {{ c_schedule }}%; color: #0f0f0f">
                                        {{ c_schedule }}%
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>3</td>
                            <td>白班</td>
                            <td>M线</td>
                            <td>{{ m_line_data_day }}</td>
                            <td>{{ sm_line_data_day }}</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="{{ m_day_schedule }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100" style="width: {{ m_day_schedule }}%; color: #0f0f0f">
                                        {{ m_day_schedule }}%
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>4</td>
                            <td>夜班</td>
                            <td>M线</td>
                            <td>{{ m_line_data_night }}</td>
                            <td>{{ sm_line_data_night }}</td>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                         aria-valuemax="100" style="width: {{ m_night_schedule }}%; color: #0f0f0f">
                                        {{ m_night_schedule }}%
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br>
                    <div style="height: 500px">
                        <div id="container" style="height: 100%"></div>

                    </div>
                    <br>
                    <div style="height: 500px">
                        <div id="8b62570471b44efabd526d7a3b24dec9" class="chart-container"
                             style="width:900px; height:500px; "></div>


                    </div>
                </div>
            </div>


        </div>
    </div>

{% endblock %}
{% block js %}
    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        const posList = [
            'left',
            'right',
            'top',
            'bottom',
            'inside',
            'insideTop',
            'insideLeft',
            'insideRight',
            'insideBottom',
            'insideTopLeft',
            'insideTopRight',
            'insideBottomLeft',
            'insideBottomRight'
        ];
        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };
        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                const labelOption = {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                };
                myChart.setOption({
                    series: [
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        }
                    ]
                });
            }
        };
        const labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['Forest', 'Steppe', 'Desert', 'Wetland']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: ['2012', '2013', '2014', '2015', '2016']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Forest',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: 'Steppe',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: 'Desert',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190]
                },
                {
                    name: 'Wetland',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [98, 77, 101, 99, 40]
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>
    <script>
        var chart_8b62570471b44efabd526d7a3b24dec9 = echarts.init(
            document.getElementById('8b62570471b44efabd526d7a3b24dec9'), 'white', {renderer: 'canvas'});
        var option_8b62570471b44efabd526d7a3b24dec9 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "aria": {
                "enabled": false
            },
            "color": [
                "#5470c6",
                "#91cc75",
                "#fac858",
                "#ee6666",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc"
            ],
            "series": [
                {
                    "type": "pie",
                    "colorBy": "data",
                    "legendHoverLink": true,
                    "selectedMode": false,
                    "selectedOffset": 10,
                    "clockwise": true,
                    "startAngle": 90,
                    "minAngle": 0,
                    "minShowLabelAngle": 0,
                    "avoidLabelOverlap": true,
                    "stillShowZeroSum": true,
                    "percentPrecision": 2,
                    "showEmptyCircle": true,
                    "emptyCircleStyle": {
                        "color": "lightgray",
                        "borderColor": "#000",
                        "borderWidth": 0,
                        "borderType": "solid",
                        "borderDashOffset": 0,
                        "borderCap": "butt",
                        "borderJoin": "bevel",
                        "borderMiterLimit": 10,
                        "opacity": 1
                    },
                    "data": [
                        {
                            "name": "\u54c8\u58eb\u5947",
                            "value": 50
                        },
                        {
                            "name": "\u8428\u6469\u8036",
                            "value": 55
                        },
                        {
                            "name": "\u6cf0\u8fea",
                            "value": 114
                        },
                        {
                            "name": "\u91d1\u6bdb",
                            "value": 24
                        },
                        {
                            "name": "\u7267\u7f8a\u72ac",
                            "value": 39
                        },
                        {
                            "name": "\u5409\u5a03\u5a03",
                            "value": 114
                        },
                        {
                            "name": "柯基",
                            "value": 69
                        }
                    ],
                    "radius": [
                        "40%",
                        "55%"
                    ],
                    "center": [
                        "50%",
                        "50%"
                    ],
                    "label": {
                        "show": true,
                        "position": "outside",
                        "margin": 8,
                        "formatter": "{a|{a}}{abg|}\n{hr|}\n {b|{b}: }{c}  {per|{d}%}  ",
                        "backgroundColor": "#eee",
                        "borderColor": "#aaa",
                        "borderWidth": 1,
                        "borderRadius": 4,
                        "rich": {
                            "a": {
                                "color": "#999",
                                "lineHeight": 22,
                                "align": "center"
                            },
                            "abg": {
                                "backgroundColor": "#e3e3e3",
                                "width": "100%",
                                "align": "right",
                                "height": 22,
                                "borderRadius": [
                                    4,
                                    4,
                                    0,
                                    0
                                ]
                            },
                            "hr": {
                                "borderColor": "#aaa",
                                "width": "100%",
                                "borderWidth": 0.5,
                                "height": 0
                            },
                            "b": {
                                "fontSize": 16,
                                "lineHeight": 33
                            },
                            "per": {
                                "color": "#eee",
                                "backgroundColor": "#334455",
                                "padding": [
                                    2,
                                    4
                                ],
                                "borderRadius": 2
                            }
                        }
                    },
                    "labelLine": {
                        "show": true,
                        "showAbove": false,
                        "length": 15,
                        "length2": 15,
                        "smooth": false,
                        "minTurnAngle": 90,
                        "maxSurfaceAngle": 90
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        "\u54c8\u58eb\u5947",
                        "\u8428\u6469\u8036",
                        "\u6cf0\u8fea",
                        "\u91d1\u6bdb",
                        "\u7267\u7f8a\u72ac",
                        "\u5409\u5a03\u5a03",
                        "\u67ef\u57fa"
                    ],
                    "selected": {},
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14,
                    "backgroundColor": "transparent",
                    "borderColor": "#ccc",
                    "borderRadius": 0,
                    "pageButtonItemGap": 5,
                    "pageButtonPosition": "end",
                    "pageFormatter": "{current}/{total}",
                    "pageIconColor": "#2f4554",
                    "pageIconInactiveColor": "#aaa",
                    "pageIconSize": 15,
                    "animationDurationUpdate": 800,
                    "selector": false,
                    "selectorPosition": "auto",
                    "selectorItemGap": 7,
                    "selectorButtonGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "enterable": false,
                "confine": false,
                "appendToBody": false,
                "transitionDuration": 0.4,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5,
                "order": "seriesAsc"
            },
            "title": [
                {
                    "show": true,
                    "text": "Pie-\u5bcc\u6587\u672c\u793a\u4f8b",
                    "target": "blank",
                    "subtarget": "blank",
                    "padding": 5,
                    "itemGap": 10,
                    "textAlign": "auto",
                    "textVerticalAlign": "auto",
                    "triggerEvent": false
                }
            ]
        };
        chart_8b62570471b44efabd526d7a3b24dec9.setOption(option_8b62570471b44efabd526d7a3b24dec9);
    </script>
{% endblock %}